<template>
  <div id="tradingRecord">
    <div class="tradingRecord-top">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>交易记录</h4>
        <span>当前系统支持查询最近30日的交易记录</span>
      </div>
      <div class="type">
        <span>类型</span>
        <el-select size="small" v-model="type" placeholder="转入">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </div>
      <div class="timer">
        <div class="time-left">
          <span>日期</span>
          <el-date-picker
            size="small"
            v-model="time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          ></el-date-picker>
          <el-button-group style="margin:0 10px">
            <el-button size="small" plain>今日</el-button>
            <el-button size="small" plain>昨日</el-button>
            <el-button size="small" plain>近七日</el-button>
            <el-button size="small" plain>近30日</el-button>
          </el-button-group>
        </div>
        <div class="time-right">
          <span class="search">查询</span>
          <span class="reset">重置</span>
        </div>
      </div>
    </div>

    <div class="tables">
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="date" label="日期" min-width="100"></el-table-column>
        <el-table-column prop="date" label="订单号" min-width="100"></el-table-column>
        <el-table-column prop="date" label="交易类型" min-width="100"></el-table-column>
        <el-table-column prop="date" label="可用金额" min-width="100"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "tradingRecord",
  data() {
    return {
      time: "",
      activeName: "first",
      tableData1: [],
      tableData2: [],
      type: ""
    };
  },
  methods: {}
};
</script>
<style lang='less' scope>
.title {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > img {
    position: absolute;
    top: 4px;
  }
  > h4 {
    margin-left: 50px;
  }
  >span{
      margin-left: 20px;
      font-size: 14px;
      color: #A1B1B0;
  }
}
// ----------------------
#tradingRecord {
  .tradingRecord-top {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .type {
      margin-top: 15px;
      margin-left: 50px;
      span {
        font-size: 14px;
        color: #a1b1b0;
        margin-right: 5px;
      }
    }
    .timer {
      margin: 15px 0 15px 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > span:first-child {
          font-size: 14px;
          color: #a1b1b0;
          margin-right: 10px;
        }
        //   ----------------------
        .el-button.is-plain:focus,
        .el-button.is-plain:hover {
          border: 1px solid #dcb884;
          color: #dcb884;
        }
      }
      .time-right {
        .search {
          background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
          padding: 8px 25px;
          color: #fff;
          font-size: 12px;
          border-radius: 4px;
          margin-left: 10px;
        }
        .reset {
          padding: 8px 25px;
          color: #344e50;
          font-size: 12px;
          border-radius: 4px;
          margin-left: 10px;
          border: 1px solid #e6e6e6;
        }
      }
    }
  }
  .tables {
    height: 580px;
    background-color: #fff;
  }

  //   -----------------------------
  .el-tabs__nav-scroll {
    background-color: #f7f8f8;
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__active-bar {
    height: 0;
  }
  .el-tabs__item {
    color: #a1b1b0;
    padding: 0 10px;
  }
  .el-tabs__item.is-active {
    color: #dcb884;
  }
}
</style>